<template>
	<!--  自定义的顶部导航栏-->
	<view class="Top-view">
		<view :style="'height:' + Custom_height + 'px;'">
			<view :style="'height:'+S_top+'px;' "></view>
			<view :style="['height:' + S_height + 'px;' , 'line-height:' + S_height + 'px;', 'padding-left:' + '8px']">
				思念零食小店
			</view>
		</view>
		<!-- 定位的订单收益板块 -->
		<view class="profit-view" :style=" 'top:'+ pro_hei + 'px;' ">
			<view class="profit-num">
				<text>累计金额（元）</text>
				<text>30462.88</text>
			</view>
			<view class="profit-sale">
				<view>
					<text>今日销售额</text>
					<text>50</text>
				</view>
				<view>
					<text>今日订单数</text>
					<text>20</text>
				</view>
				<view>
					<text>积累订单数</text>
					<text>256</text>
				</view>
			</view>
		</view>
 	</view>
	<!-- 九空格 -->
	<view class="Gong-ge" :style=" 'top:' + profit_top + 'px;' ">
		<view v-for="(item,index) in plate" :key="index" @click="jump(index)">
			<image :src="item.image" mode="aspectFit"></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,reactive,toRefs} from 'vue'
	// 存储胶囊按钮的位置数据
	const search_data = reactive({
		S_height:0,//胶囊按钮的高度
		S_top:0,//胶囊按钮距离顶部的
		Custom_height:0,//上面两个之和
		pro_hei:0,//订单收益板块距离手机顶部的高度
		profit_top:0,//九宫格距离手机顶部的高度
		// 九宫格数组
		plate:[
			{
				image:'',
				name:'横幅管理',
				
			},
			{
				image:'',
				name:'秒杀管理',
			},
			{
				image:'',
				name:'商品管理',
				path:'/pages/commodity/commodity'
			},
			{
				image:'',
				name:'订单管理',
			},
			{
				image:'',
				name:'分类管理',
			} 
		]
	})
	const {S_height,S_top,Custom_height,pro_hei,profit_top,plate}= toRefs(search_data);
	onMounted(()=>{
		capSule();
		proFit();
	})
	// 获取胶囊按钮的位置数据
	function capSule(){
		const but_data = wx.getMenuButtonBoundingClientRect()
		// console.log(but_data);
		search_data.S_top = but_data.top;
		search_data.S_height = but_data.height;
		search_data.Custom_height = but_data.top + but_data.height;
		search_data.pro_hei = but_data.top + but_data.height + 20;
	}
	// 计算收益板块的高度
	function proFit(){
		const query = wx.createSelectorQuery()
		query.select('.profit-view').boundingClientRect()
		query.exec((res)=>{ 
			search_data.profit_top = res[0].height + search_data.pro_hei + 10;
		})
	}
	// 页面跳转
	function jump(index){
		switch(index){
			case 0:
			wx.navigateTo({
				url:'/pages/banner_admin/banner'
			})
			break;
			case 1:
			wx.navigateTo({
				url:'/pages/seckill-admin/seckill'
			})
			break;
			case 2:
			wx.switchTab({
				url:'/pages/commodity/commodity'
			})
			break;
			case 3:
			wx.switchTab({
				url:'/pages/order/order'
			})
			break;
			case 4:
			wx.navigateTo({
				url:'/pages/sort-admin/sort'
			})
			break;
		}
	}
</script>

<style>
	page{
		background-color: #f4f4f4;
	}
	.Top-view{
		height: 330rpx;
		position: relative;
		background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
	}
	.profit-view{
		background-color: #FFFFFF;
		position: absolute;
		left: 20rpx;
		right: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.profit-num{
		display: flex;
		flex-direction: column;
		padding-bottom: 10rpx;
	}
	.profit-num text:nth-child(2){
		font-size: 40rpx;
		padding-top: 10rpx;
	}
	.profit-sale{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.profit-sale view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.profit-sale view text:nth-child(1){
		color: #a7a7a7;
	    padding-bottom: 10rpx;
	}
	.profit-sale view text:nth-child(2){
		font-weight: bold;
	}
	.Gong-ge{
		background-color: #FFFFFF;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		left: 0;
		right: 0;
		color: #555555;
	}
	.Gong-ge image{
		width: 55rpx;
		height: 55rpx;
		display: block;
		margin-bottom: 20rpx;
	}
	.Gong-ge view{
		width: calc(25% - 10rpx*2);
		margin: 20rpx 10rpx;
		display: flex; 
		flex-direction: column;
		align-items: center;
	}
	 
</style>
